import { getMovies, getLrc,  findIndexByTime } from "./../cart/data";
import "./../style.css";
import MyImage from "./../assets/images/4409643a79630f132d31fd171bac184c.jpeg";
import MyAudio from "./../assets/audio/bcc95f02fbc6.mp3";

const lrcList = getLrc();
const movies = getMovies();
const main = document.createElement("div");
const image = document.createElement("img");
image.src = MyImage;
image.width = 200;
image.height = 120;

const title = document.createElement("div");
title.appendChild(image);
title.classList.add("title");
main.appendChild(title);

const list = document.createElement("div");
list.classList.add("list");
list.innerHTML = movies.map((movie) => `<h2>${movie.title}</h2>`).join("");
// main.appendChild(list);

const audio = document.createElement("audio");
audio.classList.add("audio");
audio.src = MyAudio;
audio.style.width = "560px";
audio.controls = true;

console.log(lrcList);
main.appendChild(audio);
const container = document.createElement("div");
container.classList.add("container");
const lrcUiList = document.createElement("ul");
lrcUiList.classList.add("lrc-list");
lrcUiList.innerHTML = lrcList.map((lrc) => `<li>${lrc.text}</li>`).join("");

audio.addEventListener("timeupdate", () => {
  console.log("当前播放时间:", audio.currentTime);
  let _index = findIndexByTime(lrcList, audio.currentTime);
  Array.from(lrcUiList.children).forEach((element, i) => {
    if (i == _index) {
      element.classList.add("active");
    } else {
      element.classList.remove("active");
    }
  });
  lrcUiList.style.transform = `translateY(-${_index * 40 - 200}px)`;
});

container.appendChild(lrcUiList);
main.appendChild(container);
main.classList.add("main");
document.body.appendChild(main);
